<template>
	<view>
		<page-head headTitle="扫一扫" :returnButton="true" @clickLeftReturn="clickLeftReturn"></page-head>
		<view class="m-t9">
			<view>
				<view class="pic-bj"></view>
				<view class="flex justify-content scan-mt">
					<image class="scan-image flex justify-content" :src="info.avatar"></image>
				</view>	
				<text class="flex justify-content fs-32 m-t-3">{{info.name}}</text>
				<view class="m-t3 scan-money mlr-auto">
					<input class="scan-input scan-money border border-r fs-3 p-l3" placeholder-class="color-c" type="number" v-model="amount" @input="inputMoney" :maxlength="maxLength" placeholder="请输入消费金额...">
					<view class="m-t-3">
						<view class="flex justify-between fs-3">
							<text>优惠</text><text class="color-red">{{discountM}}</text>
						</view>
						<view class="flex justify-between fs-3 m-t1">
							<text>实付</text><text class="input-goods">{{payM}}</text>
						</view>
						<button class="bg-color fs-3 m-t9" @tap="goPay">确认支付</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import pageHead from '@/components/common/page-head.vue'
	export default {
		components:{
			pageHead
		},
		data() {
			return {
				sellerId:'111lkg',
				info:'',
				amount:'',
				maxLength:100,
				discountM:0,
				payM:0
			}
		},
		onLoad(e) {
			if(e.id){
				this.sellerId = e.id;
			}
			this.init();
			this.getInfo();
		},
		methods: {
			clickLeftReturn(){
				uni.navigateBack({
				    delta: 1
				});
			},
			init(e){
				let _this = this;
				this.$myRequest({
					method:'POST',
					url:'/api/wxset/jsapi',
				}).then(res=>{
					if(res.data.code == 1){
						var wxconfig = res.data.data;
						_this.$wx.config({
						   debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
						   appId: wxconfig.app_id, // 必填，公众号的唯一标识
						   timestamp: wxconfig.timestamp, // 必填，生成签名的时间戳
						   nonceStr: wxconfig.nonceStr, // 必填，生成签名的随机串
						   signature: wxconfig.signature,// 必填，签名
						   jsApiList: ["chooseWXPay"] // 必填，需要使用的JS接口列表
						});
						_this.$wx.error(function(res){
							console.log("验证失败")
						});
					}else{
						this.showMessage(res.data.msg);
					}
				})
			},
			inputMoney(e){
				var val = e.detail.value;
				var maxLength = val.indexOf('.');
				var discount;
				if (!(/^(\d?)+(\.\d{0,2})?$/.test(val))) {
					var l = val.length;
					var i = l-(maxLength+3);
					maxLength = val.length - i;
					val = val.substring(0, val.length - i);
				}else{
					maxLength = 100;
				}
				this.maxLength = maxLength;
				this.amount = val;
				if(this.info.discount > 0){
					discount = this.info.discount/100; //折扣率
				}else{
					discount = 1; //无优惠
				}
				var payM = (val*discount).toFixed(2); //折扣金额
				this.discountM = (val-payM).toFixed(2)
				this.payM = payM;
			},
			getInfo(){
				this.$myRequest({
					method:'POST',
					url:'/api/merchant/charge',
					data:{
						id:this.sellerId
					},
				}).then(res=>{
					//console.log(res);
					if(res.data.code == 1){	
						this.info = res.data.data.merchant;
					}else{
						this.showMessage(res.data.msg);
					}
				})
			},
			goPay(e){
				var amount = this.amount;	
				this.$myRequest({
					method:'POST',
					url:'/api/merchant.charge/submit',
					data:{
						id:this.sellerId,
						amount:amount
					},
				}).then(res=>{
					if(res.data.code == 1){
						let _this = this;
						var data = res.data.data;
						this.$wx.ready(function(){
							_this.$wx.chooseWXPay({
							  timestamp: data.timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
							  nonceStr: data.nonceStr, // 支付签名随机串，不长于 32 位
							  package: data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
							  signType: data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
							  paySign: data.paySign, // 支付签名
							  complete: function(res){
								var url = '#/pages/user/index/index';
								if (res.errMsg == "chooseWXPay:ok") { 
									window.location.href = url;   
								}
								else if(res.errMsg == "chooseWXPay:cancel" ) {
									window.location.href = url;  
								}else if (res.errMsg == "chooseWXPay:fail") {
									window.location.href = url;  
								}
							  },
							});
						});
					}else{
						this.showMessage(res.data.msg);
					}
				})
			},
			showMessage(title){
				uni.showToast({
				    title: title,
				    duration: 3000,
					icon:"none",
				});
			}
		}
	}
</script>

<style>
page{background-color: #FFFFFF;}
.scan-money{width: 428rpx;}
.scan-image{width: 272rpx; height: 272rpx;}
.scan-mt{margin-top: -132rpx;}
.scan-input{height: 100rpx;}
</style>
